<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="./bootstrap-3.4.1/dist/css/bootstrap.css" />
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="./bootstrap-3.4.1/dist/js/bootstrap.js"></script>
    <script src="./city.js"></script>
  </head>
  <style>
    body {
      display: flex;
    }
    .con {
      margin: auto;
      margin-top: 30px;
    }
    .se {
      width: 150px;
      float: left;
    }
    .tableclass {
      margin-top: 30px;
    }
    li {
      border: 1px solid #ccc;
      list-style: none;
      width: 100px;
      height: 30px;
      float: left;
      text-align: center;
    }
    th,
    td {
      text-align: center;
    }
  </style>
  <body>
    <div class="con">
      <div>
        <h1>学生成绩管理</h1>
      </div>
      <select class="form-control se" id="city">
        <option>请选择班级</option>
        <option>2202</option>
        <option>2112</option>
        <option>2109</option>
        <option>2107</option>
      </select>
      <select class="form-control se" id="city">
        <option>请选择阶段</option>
        <option>一段</option>
        <option>二段</option>
        <option>三段</option>
        <option>四段</option>
      </select>
      <!-- tab标签 -->
      <table class="table table-bordered tableclass">
        <tr>
          <th rowspan="2">姓名</th>
          <th>第一周</th>
          <th colspan="3">第二周</th>
          <th>第三周</th>
          <th colspan="3">第四周</th>
          <th rowspan="2">月平均分数</th>
          <th rowspan="2">末位次数</th>
          <th rowspan="2">操作</th>
        </tr>
        <tr>
          <th>机试分数</th>
          <th>笔试分数</th>
          <th>机试分数</th>
          <th>平均分数</th>

          <th>机试分数</th>

          <th>笔试分数</th>
          <th>机试分数</th>
          <th>平均分数</th>
        </tr>
        <tr>
          <td>张三</td>
          <td>60</td>
          <td>20</td>
          <td>60</td>
          <td>60</td>
          <td>20</td>
          <td>60</td>
          <td>60</td>
          <td>20</td>
          <td style="background-color: rgb(250, 171, 171)">50</td>
          <td>3</td>
          <td>
            <button class="btn btn-default">删除</button>
          </td>
        </tr>
        <tr>
          <td>张三3</td>
          <td>60</td>
          <td>20</td>
          <td>60</td>
          <td>60</td>
          <td>20</td>
          <td>60</td>
          <td>60</td>
          <td>20</td>
          <td>60</td>
          <td>3</td>
          <td>
            <button class="btn btn-default">删除</button>
          </td>
        </tr>
        <tr>
          <td>张三2</td>
          <td>60</td>
          <td>20</td>
          <td>60</td>
          <td>60</td>
          <td>20</td>
          <td>60</td>
          <td>60</td>
          <td>20</td>
          <td>60</td>
          <td>3</td>
          <td>
            <button class="btn btn-default">删除</button>
          </td>
        </tr>
        <tr>
          <td>张三1</td>
          <td>60</td>
          <td>20</td>
          <td>60</td>
          <td>60</td>
          <td>20</td>
          <td>60</td>
          <td>60</td>
          <td>20</td>
          <td style="background-color: rgb(250, 171, 171)">50</td>
          <td>3</td>
          <td>
            <button class="btn btn-default">删除</button>
          </td>
        </tr>
      </table>
      <button class="btn btn-default">添加学生</button>
    </div>
  </body>
  <script></script>
</html>
